Lazy Loading এবং Async Attribute দুটি প্রযুক্তি যা ওয়েব পেজের লোডিং পারফরম্যান্স উন্নত করতে ব্যবহৃত হয়। এগুলি প্রধানত ইমেজ, স্ক্রিপ্ট, এবং অন্যান্য রিসোর্স লোডিং অপটিমাইজ করতে ব্যবহৃত হয়, যাতে পেজ দ্রুত লোড হয় এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত হয়।
Lazy Loading
Lazy loading হলো একটি প্রযুক্তি যেখানে কোনো রিসোর্স (যেমন, ইমেজ, ভিডিও, iframe, বা অন্যান্য উপাদান) শুধুমাত্র তখনই লোড করা হয় যখন তা স্ক্রীনের মধ্যে দেখা যায় বা প্রয়োজনীয় হয়ে ওঠে। এর ফলে প্রথমে পেজ লোড হওয়ার সময় শুধুমাত্র প্রয়োজনীয় উপাদানগুলি লোড হয় এবং অন্যান্য উপাদানগুলি পরে লোড হতে থাকে।
Lazy Loading ব্যবহার করা
HTML5-এ ইমেজ এবং iframe উপাদানের জন্য loading="lazy" অ্যাট্রিবিউটটি যোগ করা যায়, যা lazy loading সক্ষম করে।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Lazy Loading Example</title>
</head>
<body>
<h1>Lazy Loading উদাহরণ</h1>
<!-- Lazy Load করা ইমেজ -->
<img src="image1.jpg" alt="Lazy Loaded Image" loading="lazy">
<img src="image2.jpg" alt="Lazy Loaded Image" loading="lazy">
<img src="image3.jpg" alt="Lazy Loaded Image" loading="lazy">
<p>এই পেজটি lazy loading ব্যবহার করে ইমেজ লোড করবে।</p>
</body>
</html>
Lazy Loading এর সুবিধা:
- পারফরম্যান্স বৃদ্ধি: যেহেতু প্রথমে শুধুমাত্র দেখা প্রয়োজন এমন রিসোর্সগুলি লোড হয়, পেজের লোড টাইম দ্রুত হয়।
- ব্যান্ডউইথ সংরক্ষণ: পেজের প্রথম লোডে সমস্ত রিসোর্স লোড না করে, কেবলমাত্র স্ক্রীনে দৃশ্যমান রিসোর্সগুলো লোড হওয়ায় ব্যান্ডউইথ বাঁচে।
- ব্যবহারকারীর অভিজ্ঞতা উন্নত: যখন পেজ দ্রুত লোড হয়, তখন ব্যবহারকারীর অভিজ্ঞতা উন্নত হয়।
Async Attribute
async অ্যাট্রিবিউটটি HTML <script> ট্যাগে ব্যবহার করা হয় এবং এটি স্ক্রিপ্ট ফাইলের লোডিং আচরণ পরিবর্তন করে। যখন async অ্যাট্রিবিউট ব্যবহার করা হয়, তখন স্ক্রিপ্টটি পেজ লোড হওয়া অবধি অপেক্ষা না করে প্যারালালভাবে লোড হতে শুরু করে এবং একবার স্ক্রিপ্ট লোড হলে তা এক্সিকিউট করা হয়। এর ফলে পেজের রেন্ডারিং টাইম কমে যায়, কারণ স্ক্রিপ্ট লোড হওয়ার সময় পেজের অন্যান্য অংশ লোড হতে থাকে।
Async Attribute ব্যবহার করা
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Async Attribute উদাহরণ</title>
</head>
<body>
<h1>Async Script লোডিং উদাহরণ</h1>
<!-- Async attribute ব্যবহার করা স্ক্রিপ্ট -->
<script async src="script.js"></script>
<p>এই পেজে স্ক্রিপ্টটি async পদ্ধতিতে লোড হবে।</p>
</body>
</html>
Async Attribute এর সুবিধা:
- পেজ রেন্ডারিং দ্রুত করা: যেহেতু স্ক্রিপ্ট পেজের লোডিং প্রক্রিয়ার সাথে প্যারালালভাবে লোড হয়, পেজ রেন্ডারিং দ্রুত হয়।
- স্ক্রিপ্ট এক্সিকিউট করা দ্রুত: একবার স্ক্রিপ্ট লোড হলে তা অবিলম্বে এক্সিকিউট করা হয়, কিন্তু এটি পেজের অন্যান্য উপাদানের রেন্ডারিং প্রক্রিয়াকে ব্লক করে না।
- অধিক ব্যবহারকারীর অভিজ্ঞতা: স্ক্রিপ্ট দ্রুত লোড হওয়ার কারণে ব্যবহারকারীরা দ্রুত পেজ ব্যবহার করতে পারে।
Async এবং Defer Attribute এর মধ্যে পার্থক্য
async:- যখন
asyncঅ্যাট্রিবিউট ব্যবহার করা হয়, স্ক্রিপ্ট লোডিং শুরু হয় পেজ রেন্ডারিং চলাকালীন এবং একবার স্ক্রিপ্ট লোড হয়ে গেলে তা এক্সিকিউট হয়। এটি পেজ লোড করার সাথে প্যারালালভাবে চলে, তবে স্ক্রিপ্ট লোড হওয়া এবং এক্সিকিউট হওয়ার সময় পেজের অন্য অংশ রেন্ডার হতে পারে না। - এটি প্রধানত ব্যবহৃত হয় যখন স্ক্রিপ্ট অন্য উপাদান বা স্ক্রিপ্টের উপর নির্ভরশীল নয়।
- যখন
defer:deferঅ্যাট্রিবিউট ব্যবহার করলে, স্ক্রিপ্টটি পেজ রেন্ডারিং শেষ হওয়া পর্যন্ত এক্সিকিউট হয় না। তবে এটি লোড হয় পেজ রেন্ডারিংয়ের সাথে প্যারালালভাবে। এটি সাধারণত ব্যবহার করা হয় যদি স্ক্রিপ্টটি পেজের অন্যান্য উপাদান বা স্ক্রিপ্টের উপর নির্ভরশীল না হয়ে শুধুমাত্র পেজের রেন্ডারিংয়ের পর এক্সিকিউট হওয়া প্রয়োজন।- উদাহরণ:
<script defer src="script.js"></script>
Lazy Loading এবং Async Attribute এর একত্রে ব্যবহার
আপনি lazy loading এবং async attribute একসাথে ব্যবহার করতে পারেন, যেমন:
- Lazy Load ইমেজ এবং ভিডিও:
- ইমেজের
loading="lazy"অ্যাট্রিবিউট ব্যবহার করে এবং স্ক্রিপ্টেasyncঅ্যাট্রিবিউট দিয়ে পেজের লোডিং পারফরম্যান্স আরও উন্নত করা যায়।
- ইমেজের
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Lazy Load এবং Async</title>
</head>
<body>
<h1>Lazy Loading এবং Async Attribute উদাহরণ</h1>
<!-- Lazy Load ইমেজ -->
<img src="image1.jpg" alt="Lazy Image" loading="lazy">
<img src="image2.jpg" alt="Lazy Image" loading="lazy">
<!-- Async স্ক্রিপ্ট -->
<script async src="script.js"></script>
</body>
</html>
- Lazy Loading ইমেজ বা অন্যান্য রিসোর্সের লোডিং বিলম্বিত করে, যাতে পেজটি দ্রুত লোড হয় এবং ব্যান্ডউইথ সাশ্রয় হয়।
- Async Attribute স্ক্রিপ্ট লোড এবং এক্সিকিউট করা দ্রুত করে, কারণ এটি পেজ রেন্ডারিং প্রক্রিয়া ব্লক না করে প্যারালালভাবে কাজ করে।
- এই দুটি প্রযুক্তি একত্রে ব্যবহার করলে ওয়েব পেজের পারফরম্যান্স অনেক উন্নত হয় এবং ব্যবহারকারীর অভিজ্ঞতা আরও দ্রুত হয়।
সারাংশ:
- Lazy loading এবং async attribute ব্যবহার করলে পেজের লোড টাইম কমে এবং পেজ দ্রুত প্রদর্শিত হয়।
- এই দুটি ফিচার ওয়েব পেজের পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করে।
Read more
